<template>
  <h1>Hello Vue3</h1>
  <h1>组合API-ref函数</h1>
  <!--  在模板中，ref 属性会自动解套，不需要格外的 .value  -->
  <h2>{{ msg }}</h2>
  <button @click="changeMsg">点击改变</button>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    //  通过 ref 把普通的字符串包装成响应式对象
    const msg = ref("Nice~");

    //  打印包装后的对象
    console.log(msg);

    //  ref 真实值要通过 .value 访问
    console.log(msg.value);

    const changeMsg = () => {
      //  修改响应对象的真实值，视图能更新
      msg.value = "棒极了~~";
    };

    return { msg, changeMsg };
  },
});
</script>


